<template>
  <div class="login-page">
    <div class="decoration heart-1"><i class="fas fa-heart"></i></div>
    <div class="decoration heart-2"><i class="fas fa-heart"></i></div>
    <div class="decoration heart-3"><i class="fas fa-heart"></i></div>

    <div class="container">
      <!-- Logo部分 -->
      <div class="logo-section">
        <div class="logo-container">
          <div class="logo-icon">
            <i class="fas fa-heart"></i>
          </div>
        </div>
        <h1 class="brand-name">DOREMI</h1>
        <p class="tagline">您的专属职场心灵伙伴</p>
      </div>

      <!-- 消息提示 -->
      <div v-if="message.text" :class="['message', message.type]">
        {{ message.text }}
      </div>

      <!-- 欢迎部分 -->
      <div class="welcome-section">
        <p class="welcome-text">欢迎回来，今天也请好好关照自己</p>
      </div>

      <!-- 登录表单 -->
      <div class="login-form">
        <div class="form-group">
          <label for="phone">手机号</label>
          <input
            type="text"
            id="phone"
            placeholder="请输入您的手机号"
            v-model="phone"
            @keyup.enter="handleLogin"
          />
        </div>

        <div class="form-group">
          <label for="name">姓名</label>
          <input
            type="text"
            id="name"
            placeholder="请输入您的姓名"
            v-model="name"
            @keyup.enter="handleLogin"
          />
        </div>

        <button class="login-btn" @click="handleLogin" :disabled="loading">
          {{ loading ? "登录中..." : "进入DOREMI专属空间" }}
        </button>
      </div>

      <!-- 功能区域 -->
      <div class="features features-employee">
        <div class="feature">
          <i class="fas fa-shield-alt"></i>
          <span>安全私密</span>
        </div>
        <div class="feature">
          <i class="fas fa-comments"></i>
          <span>专业支持</span>
        </div>
        <div class="feature">
          <i class="fas fa-chart-line"></i>
          <span>成长追踪</span>
        </div>
        <div class="feature">
          <i class="fas fa-hands-helping"></i>
          <span>专属关怀</span>
        </div>
      </div>

      <!-- 页脚 -->
      <footer>
        <p>您的心理健康，我们用心守护</p>
      </footer>
    </div>
  </div>
</template>

<script>
import { loginMobile } from "../../api/index";

export default {
  name: "LoginPage",
  data() {
    return {
      phone: "",
      name: "",
      loading: false,
      message: {
        text: "",
        type: "", // success, error
      },
    };
  },
  methods: {
    // 显示消息
    showMessage(text, type = "error") {
      this.message = { text, type };
      // 3秒后自动清除消息
      setTimeout(() => {
        this.message.text = "";
      }, 3000);
    },

    // 处理登录
    async handleLogin() {
      // 表单验证 - 只需要校验是否输入
      if (!this.phone) {
        this.showMessage("请输入手机号");
        return;
      }

      if (!this.name) {
        this.showMessage("请输入姓名");
        return;
      }

      this.loading = true;
      this.message.text = ""; // 清除之前的消息

      try {
        let data = {
          phone: this.phone,
          name: this.name,
        };

        const res = await loginMobile(data);

        if (res.code === 200) {
          localStorage.setItem("userId", res.data.id);
          localStorage.setItem("unitId", res.data.unitId);
          this.showMessage("登录成功", "success");

          setTimeout(() => {
            this.$router.push("/minsheng/tapingbanner");
          }, 1000);
        } else {
          this.showMessage(res.message || "登录失败，请检查手机号和姓名");
        }
      } catch (error) {
        console.error("Login error:", error);
        this.showMessage("登录失败，请检查网络连接或联系管理员");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.login-page {
  background: linear-gradient(135deg, #eef7fe 0%, #becdee 100%);

  color: #4a6b8a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-section {
  text-align: center;
  margin-bottom: 30px;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.logo-icon {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(74, 107, 138, 0.15);
}

.logo-icon i {
  font-size: 50px;
  color: #5a7db8;
}

.brand-name {
  font-size: 32px;
  font-weight: 700;
  color: #4a6b8a;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.tagline {
  font-size: 16px;
  color: #5a7db8;
  font-weight: 500;
}

/* 消息提示样式 */
.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.message.success {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.message.error {
  background-color: rgba(244, 67, 54, 0.1);
  color: #c62828;
  border: 1px solid rgba(244, 67, 54, 0.2);
}

.welcome-section {
  text-align: center;
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 20px;
  color: #4a6b8a;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.login-form {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(74, 107, 138, 0.15);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #4a6b8a;
  font-size: 14px;
  font-weight: 500;
}

.form-group input {
  width: 90%;
  padding: 14px;
  border: 1px solid #b6d8f2;
  border-radius: 10px;
  font-size: 15px;
  background: white;
  color: #4a6b8a;
  transition: all 0.3s;
}

.form-group input:focus {
  border-color: #5a7db8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 125, 184, 0.2);
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #5a7db8 0%, #4a6b8a 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(90, 125, 184, 0.4);
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(90, 125, 184, 0.5);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 员工端功能样式 */
.features-employee {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}

.features-employee .feature {
  text-align: center;
  font-size: 13px;
  color: #4a6b8a;
}

.features-employee .feature i {
  display: block;
  font-size: 20px;
  margin-bottom: 5px;
  color: #5a7db8;
}

footer {
  text-align: center;
  margin-top: 20px;
  color: #5a6b8a;
  font-size: 13px;
}

.decoration {
  position: absolute;
  z-index: 0;
}

.decoration.heart-1 {
  top: 10%;
  left: 10%;
  font-size: 24px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 6s ease-in-out infinite;
}

.decoration.heart-2 {
  bottom: 15%;
  right: 10%;
  font-size: 20px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 5s ease-in-out infinite 1s;
}

.decoration.heart-3 {
  top: 30%;
  right: 15%;
  font-size: 16px;
  color: rgba(90, 125, 184, 0.3);
  animation: float 7s ease-in-out infinite 0.5s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 480px) {
  .brand-name {
    font-size: 28px;
  }

  .welcome-text {
    font-size: 18px;
  }
}
</style>
